<template>
    <div class="widgets-window">
        <div class="flex items-center px-4 py-2 border-b border-br-light">
            <span class="mr-2 font-bold text-tx-regular">组件箱</span>
        </div>
        <el-scrollbar>
            <div class="components">
                <div
                    v-for="(item, index) in Toolbox"
                    :key="index"
                    class="component-item"
                    @click="handleSelect(index)"
                >
                    <icon :name="item.icon" :size="20" />
                    <span>{{ item.name }}</span>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup lang="ts">
import { Toolbox } from './index.ts'

const emits = defineEmits(['select'])

/**
 * 处理选择
 *
 * @param {number} index
 * @author zero
 */
const handleSelect = (index: number) => {
    const tool: any = JSON.parse(JSON.stringify(Toolbox[index]))
    delete tool.icon
    emits('select', tool)
}
</script>

<style scoped lang="scss">
.widgets-window {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    width: 86px;
    background-color: var(--color-white);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--el-border-color-lighter);
}

.components {
    padding: 10px;
    display: grid;
    gap: 10px;
    .component-item {
        cursor: pointer;
        display: flex;
        gap: 3px;
        flex-direction: column;
        align-items: center;
        padding: 10px 0;
        border-radius: 8px;
        font-size: 12px;
        color: var(--el-text-color-regular);
        border: 1px solid var(--el-border-color);
        background-color: var(--el-bg-color-page);
        &:hover {
            font-weight: 500;
            border-color: var(--el-color-primary);
            background-color: var(--el-bg-color-hover);
        }
    }
}
</style>